<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    绑定事件的方式:
          1.  on事件名  在html标签上绑定 
             如: <input type="text" oninput="input()"> 
          2. 通过js的dom元素绑定  
             如 
             var search = document.getElementById('keywords')
             search.oninput=function(){
                              console.log('输入触发');
                            }
  -->
  <input type="text" oninput="input()">
  <input type="text" id="keywords">

  <!-- onclick事件 -->
  <button onclick="getvalue()">按钮</button>
  <script>
    // oninput 输入事件，一旦输入就会触发
    function input(){
      console.log('html元素绑定输入触发');
    }

    // 获取html元素(dom元素)
    var search = document.getElementById('keywords')
    console.log(search);

    // 绑定input事件
    search.oninput=function(){
      console.log('js获取dom元素绑定输入触发');
    }
    



    // onclick事件   ，   鼠标点击事件，鼠标点击即可触发
    function getvalue(){
      // search为id="keywords"的html元素
      //     <input type="text" id="keywords">
      // console.log('点击时触发');
      //  获取该输入框的值 
      var val = search.value // .value属性是输入框的值
      console.log(val);
      
    }

  </script>
</body>
</html>